<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostCatePayloadType } from '@/api/cate/types'
import type { FormRules, FormInstance } from 'element-plus'

import { reactive, ref } from 'vue'

// 表单数据（切记切记切记 全部用我给的单词）
const formData = reactive<PostCatePayloadType>({
	name: '',
	pid: [],
	keywords: '',
	url: ''
})
const formRules = reactive<FormRules>({
	name: [
		{ required: true, message: '分类名称必须', trigger: 'blur' },
		{ min: 2, max: 6, message: '分类名称至少2~6个字符', trigger: 'blur' }
	]
})

// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	formRef.value?.validate((isSuccess) => {
		if (isSuccess) {
			console.log('立即创建：', formData)
		}
	})
}
const handleReset = () => {
	formRef.value!.resetFields()
}

const options = [
	{
		value: 'guide',
		label: 'Guide',
		children: [
			{
				value: 'disciplines',
				label: 'Disciplines',
				children: [
					{
						value: 'consistency',
						label: 'Consistency'
					},
					{
						value: 'feedback',
						label: 'Feedback'
					},
					{
						value: 'efficiency',
						label: 'Efficiency'
					},
					{
						value: 'controllability',
						label: 'Controllability'
					}
				]
			},
			{
				value: 'navigation',
				label: 'Navigation',
				children: [
					{
						value: 'side nav',
						label: 'Side Navigation'
					},
					{
						value: 'top nav',
						label: 'Top Navigation'
					}
				]
			}
		]
	},
	{
		value: 'component',
		label: 'Component',
		children: [
			{
				value: 'basic',
				label: 'Basic',
				children: [
					{
						value: 'layout',
						label: 'Layout'
					},
					{
						value: 'color',
						label: 'Color'
					},
					{
						value: 'typography',
						label: 'Typography'
					},
					{
						value: 'icon',
						label: 'Icon'
					},
					{
						value: 'button',
						label: 'Button'
					}
				]
			},
			{
				value: 'form',
				label: 'Form',
				children: [
					{
						value: 'radio',
						label: 'Radio'
					},
					{
						value: 'checkbox',
						label: 'Checkbox'
					},
					{
						value: 'input',
						label: 'Input'
					},
					{
						value: 'input-number',
						label: 'InputNumber'
					},
					{
						value: 'select',
						label: 'Select'
					},
					{
						value: 'cascader',
						label: 'Cascader'
					},
					{
						value: 'switch',
						label: 'Switch'
					},
					{
						value: 'slider',
						label: 'Slider'
					},
					{
						value: 'time-picker',
						label: 'TimePicker'
					},
					{
						value: 'date-picker',
						label: 'DatePicker'
					},
					{
						value: 'datetime-picker',
						label: 'DateTimePicker'
					},
					{
						value: 'upload',
						label: 'Upload'
					},
					{
						value: 'rate',
						label: 'Rate'
					},
					{
						value: 'form',
						label: 'Form'
					}
				]
			},
			{
				value: 'data',
				label: 'Data',
				children: [
					{
						value: 'table',
						label: 'Table'
					},
					{
						value: 'tag',
						label: 'Tag'
					},
					{
						value: 'progress',
						label: 'Progress'
					},
					{
						value: 'tree',
						label: 'Tree'
					},
					{
						value: 'pagination',
						label: 'Pagination'
					},
					{
						value: 'badge',
						label: 'Badge'
					}
				]
			},
			{
				value: 'notice',
				label: 'Notice',
				children: [
					{
						value: 'alert',
						label: 'Alert'
					},
					{
						value: 'loading',
						label: 'Loading'
					},
					{
						value: 'message',
						label: 'Message'
					},
					{
						value: 'message-box',
						label: 'MessageBox'
					},
					{
						value: 'notification',
						label: 'Notification'
					}
				]
			},
			{
				value: 'navigation',
				label: 'Navigation',
				children: [
					{
						value: 'menu',
						label: 'Menu'
					},
					{
						value: 'tabs',
						label: 'Tabs'
					},
					{
						value: 'breadcrumb',
						label: 'Breadcrumb'
					},
					{
						value: 'dropdown',
						label: 'Dropdown'
					},
					{
						value: 'steps',
						label: 'Steps'
					}
				]
			},
			{
				value: 'others',
				label: 'Others',
				children: [
					{
						value: 'dialog',
						label: 'Dialog'
					},
					{
						value: 'tooltip',
						label: 'Tooltip'
					},
					{
						value: 'popover',
						label: 'Popover'
					},
					{
						value: 'card',
						label: 'Card'
					},
					{
						value: 'carousel',
						label: 'Carousel'
					},
					{
						value: 'collapse',
						label: 'Collapse'
					}
				]
			}
		]
	},
	{
		value: 'resource',
		label: 'Resource',
		children: [
			{
				value: 'axure',
				label: 'Axure Components'
			},
			{
				value: 'sketch',
				label: 'Sketch Templates'
			},
			{
				value: 'docs',
				label: 'Design Documentation'
			}
		]
	}
]

// 对话框状态
const status = ref(false)
defineExpose({
	status,
	formData
})
</script>

<template>
	<el-dialog v-model="status" title="分类编辑" width="30%" :before-close="() => (status = false)">
		<!-- 内容 -->
		<el-form label-width="80" size="large" :model="formData" :rules="formRules" ref="formRef">
			<el-form-item label="分类名称" prop="name">
				<el-input placeholder="请输入分类名称" v-model="formData.name" />
			</el-form-item>
			<el-form-item label="所属分类" prop="pid">
				<el-cascader
					v-model="formData.pid"
					:options="options"
					:props="{
						checkStrictly: true
					}"
					clearable
			/></el-form-item>
			<el-form-item label="关键词" prop="keywords">
				<el-input placeholder="请输入关键词" v-model="formData.keywords" />
			</el-form-item>
			<el-form-item label="跳转网址" prop="url">
				<el-input placeholder="请输入跳转网址" v-model="formData.url" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit">立即更新</el-button>
				<el-button type="default" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 内容 -->
	</el-dialog>
</template>

<style lang="scss" scoped>
.el-form {
	max-width: 600px;
}

:global(.el-cascader-panel) {
	background-color: #fff;
}
</style>
